<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>后台管理系统</title>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="./css/x-admin.css" media="all" />
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css" media="all" />
</head>
<body>
	<style type="text/css">
legend {
	display: block;
	width: 100px;
	border-bottom: 0px;
	font-family: "Microsoft YaHei", "Helvetica Neue";
}

legend a {
	color: #666;
}

legend a:hover {
	text-decoration: none;
}

.layui-table {
	font-family: "Microsoft YaHei", "Helvetica Neue";
}
</style>
	<div class="x-body">
		<blockquote class="layui-elem-quote">
		<%
	    	// 获取当前时间
			Date d = new Date();
			SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
			String now = df.format(d);
		%>
		
			<sapn></sapn>
			欢迎使用后台管理系统！ <span class="f-14"></span> &nbsp;&nbsp; 在线人数：
			<sapn style="font-family: 'yjsz';font-size: 2rem">	<%=application.getAttribute("count") %> </sapn>
			&nbsp;&nbsp; 登陆时间： 
			<span style="color: #FF5722; font-family: 'yjsz'; font-size: 2rem"><%=now%></span>
		</blockquote>
		<div class="row">
			<div class="col-xs-6 col-sm-4 col-md-2">
				<section class="panel bgys">
					<div class="symbol bgcolor-blue">
						<i class="fa iconfont"></i>
					</div>
					<div class="value tab-menu" bind="1">
						<a href="javascript:;" data-url="user-info.html"
							data-parent="true" data-title="用户总数"><i class="iconfont "
							data-icon=""></i>
							<h1 id="usercount"></h1> </a> <a href="javascript:;" data-url="user-info.html"
							data-parent="true" data-title="用户总数"> <i class="iconfont "
							data-icon=""></i><span>用户总数</span></a>
					</div>
				</section>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-2 ">
				<section class="panel bgys">
					<div class="symbol bgcolor-commred">
						<img src="./images/厅数.png" width="40px" height="40px">
					</div>
					<div class="value tab-menu" bind="1">
						<a href="javascript:;" data-url="user-info.html"
							data-parent="true" data-title="在映影厅数"> <i class="iconfont "
							data-icon=""></i>
							<h1 id="hallsCount"></h1>
						</a> <a href="javascript:;" data-url="user-info.html"
							data-parent="true" data-title="在映影厅数"> <i class="iconfont "
							data-icon=""></i><span>在映影厅数</span></a>
					</div>
				</section>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-2 ">
				<section class="panel bgys">
					<div class="symbol bgcolor-dark-green">
						<img src="./images/电影.png" width="40px" height="40px">
					</div>
					<div class="value tab-menu" bind="1">
						<a href="javascript:;" data-url="user-info.html"
							data-parent="true" data-title="在映片数"> <i class="iconfont "
							data-icon=""></i>
							<h1 id="moviesCount"></h1>
						</a> <a href="javascript:;" data-url="user-info.html"
							data-parent="true" data-title="在映片数"> <i class="iconfont "
							data-icon=""></i><span>在映影片数</span></a>
					</div>
				</section>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-2 ">
				<section class="panel bgys">
					<div class="symbol bgcolor-yellow-green">
						<img src="./images/观影数.png" width="40px" height="40px">
					</div>
					<div class="value tab-menu" bind="1">
						<a href="javascript:;" data-url="user-info.html"
							data-parent="true" data-title="今日观影数"> <i class="iconfont "
							data-icon=""></i>
							<h1 id="watchCount"></h1>
						</a> 
						<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日观影数"> 
							<i class="iconfont " data-icon=""></i><span>今日观影数</span>
						</a>
					</div>
				</section>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-2 ">
				<section class="panel bgys">
					<div class="symbol bgcolor-yellow-green">
						<img src="./images/营业额.png" width="40px" height="40px">
					</div>
					<div class="value tab-menu" bind="1">
						<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日收入"> 
							<i class="iconfont" data-icon=""></i>
							<h1 id="maneyCount"></h1>
						</a> 
						<a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日收入"> 
							 <i class="iconfont " data-icon=""></i><span>今日营业额</span>
						</a>
					</div>
				</section>
			</div>
			

		</div>
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend>
				<a name="default">数据统计</a>
			</legend>
		</fieldset>
		<!--相关统计-->
		<div class="row">
			<div class="col-sm-4">
				<section class="panel">
					<div class="panel-heading"></div>
					<div class="panel-body">
						<div class="echarts" id="area" style="height: 300px; height: 350px"></div>
					</div>
				</section>
			</div>
			<div class="col-sm-4">
				<section class="panel">
					<div class="panel-heading"></div>
					<div class="panel-body">
						<div class="echarts" id="main"style="height: 300px; height: 350px"></div>
					</div>
				</section>
			</div>

			<div class="col-sm-4">
				<section class="panel">
					<div class="panel-heading"></div>
					<div class="panel-body">
						<div class="echarts" id="years" style="height: 300px; height: 350px"></div>
					</div>
				</section>
			</div>
		</div>
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script src="./js/echarts.min.js"></script>
		<script src="js/jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				/* 用户总数 */
				$.get("getUserNum",function(data){
					$("#usercount").html(data);
				});
				/* 在映影厅数 */
				$.get("getHallsNum",function(data){
					$("#hallsCount").html(data);
				});
				/* 在映片数 */
				$.get("getMoviesNum",function(data){
					$("#moviesCount").html(data);
				});
				/* 今日观影数 */
				$.get("getWatchNum",function(data){
				
					if(data.ticketid==null){
						$("#watchCount").html(0);
					}else{
						$("#watchCount").html(data.ticketid);
					}
					
				});
				/* 今日赚到的钱*/
				$.get("getManeyNowNum",function(data){
					
					if(data.orderprice==null){
						$("#maneyCount").html(0);
					}else{
						$("#maneyCount").html(data.orderprice);
					}
					
				});
			});
		
		</script>
		<script type="text/javascript">
			$(function() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));
				// 指定图表的配置项和数据
				myChart.setOption({
					title: {
			            text: '收入金额统计',
			            x: 'left'
			        },
					tooltip : {
						trigger : 'axis'
					},
					legend : {
						data : [ '收入金额' ]
					},
					grid : {
						left : '3%',
						right : '4%',
						bottom : '3%',
						containLabel : true
					},
					color : [ '#C1232B', '#B5C334', '#FCCE10', '#E87C25',
							'#27727B',
							'#FE8463', '#9BCA63', '#FAD860', '#F3A43B',
							'#60C0DD',
							'#D7504B', '#C6E579', '#F4E001', '#F0805A',
							'#26C0C0' ],
					toolbox : {
						feature : {
							saveAsImage : {}
						}
					},
					xAxis : {
						type : 'category',
						data : []
					},
					yAxis : {
						type : 'value'
					},
					series : [ {
						name : '收入金额',
						type : 'line',
						stack : '总量',
						data : []
					} ]
				});
				// 异步加载数据
				$.get('getodlist').done(function(data) {
					console.log(data);
					// 填入数据
					myChart.setOption({
						xAxis : {
							// 很坐标
							data : data.data1
						},
						series : [ {
							// 根据名字对应到相应的系列
							name : '收入金额',
							// 折线数据
							data : data.data2
						} ]
					});
				});
			});
		</script>
		<script type="text/javascript">
			$(function() {
				/* 收藏人数表 */
				// 指定图表的配置项和数据
				var myChart = echarts.init(document.getElementById('area'));
				// 指定图表的配置项和数据
				myChart.setOption( {
					title: {
			            text: '收藏人数统计',
			            x: 'center'
			        },
			        tooltip: {
			            trigger: 'item',
			            formatter: "{a} <br/>{b} : {c} ({d}%)"
			        },
			        itemStyle: {
			            normal: {
			                //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
			                color: function(params) {
			                    // build a color map as your need.
			                    var colorList = [
			                        '#f36f8a','#B5C334','#FCCE10','#E87C25','#27727B',
			                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
			                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
			                    ];
			                    return colorList[params.dataIndex]
			                },
			                //以下为是否显示，显示位置和显示格式的设置了
			                label: {
			                    show: true,
			                    position: 'top',
			                    formatter: '{b}\n{c}'
			                }
			            }
			        },
			        legend: {
			            orient: 'vertical',
			            left: 'left',
			            data: []
			        },
			        series: [{
			            name: '收藏人数',
			            type: 'pie',
			            radius: '55%',
			            center: ['50%', '60%'],
			            data: [],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }]
				});

				// 异步加载数据
				$.get('getctlist').done(function(data) {

					/* 定义一个数组 */
					var shuju = new Array();
					/* 循环取值，存储 */
					for(var i=0;i<data.data2.length;i++){
						/* 定义一个对象 */
						var obj = new Object();
						
						obj.name=data.data1[i];
						obj.value=data.data2[i];

						/* 存到数组里 */
						shuju.push(obj);
						
					}
					/* 填入数据 */
	                 myChart.setOption({
	                	 legend: {
	                         data: shuju
	                     },
	                	
	                 	series: [{
	                 	    data: shuju
	                 }]
	                 });

				});
			});
			
			

		</script>
	<script type="text/javascript">
	$(function(){
		/* 观影数据表 */
		 // 基于准备好的dom，初始化echarts实例
	    var myChart = echarts.init(document.getElementById('years'));
	    // 指定图表的配置项和数据
	    myChart.setOption({
	        title: {
	            text: '观影人数统计',
	            x: 'center'
	        },
	        tooltip: {
	            trigger: 'axis',
	            axisPointer: { // 坐标轴指示器，坐标轴触发有效
	                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
	            }
	        },
	        grid: {
	            left: '3%',
	            right: '4%',
	            bottom: '3%',
	            containLabel: true
	        },
	        xAxis: [{
	            type: 'category',
	            data: [],
	            axisTick: {
	                alignWithLabel: true
	            }
	        }],
	        yAxis: [{
	            type: 'value'
	        }],
	        series: [{
	            name: '观影人数',
	            itemStyle: {
	                normal: {
	                    //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
	                    color: function(params) {
	                        // build a color map as your need.
	                        var colorList = [
	                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
	                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
	                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
	                        ];
	                        return colorList[params.dataIndex]
	                    },
	                    //以下为是否显示，显示位置和显示格式的设置了
	                    label: {
	                        show: true,
	                        position: 'top',
	                        formatter: '{c}\n{b}'
	                    }
	                }
	            },
	            type: 'bar',
	            barWidth: '60%',
	            data: []
	        }]
	    });
		 // 异步加载数据
		$.get('gettklist').done(function(data) {
			// 填入数据
			myChart.setOption({
				xAxis : {
					data : data.data1
				},
				series : [ {
					// 根据名字对应到相应的系列
					name : '观影人数',
					data : data.data2
				} ]
			});
		});
	});
   
</script>
</body>
</html>